belge olu ne demek?

Belge Olu (Document Object Model - DOM)

Belge Olu (Document Object Model - DOM), web tarayıcılarının HTML ve XML belgelerini nasıl temsil ettiğini ve bu belgelere JavaScript gibi programlama dilleriyle nasıl erişilebileceğini ve manipüle edilebileceğini tanımlayan bir programlama arayüzüdür.

Temel olarak DOM:

  • Belgeyi ağaç yapısında temsil eder: HTML veya XML belgesinin her bir öğesi (element), niteliği (attribute) ve metin içeriği DOM ağacında birer düğüm (node) olarak yer alır. Bu ağaç yapısı, belgenin hiyerarşik yapısını yansıtır.
  • Programlama arayüzü sağlar: JavaScript gibi diller aracılığıyla DOM'a erişilerek belgenin içeriği, yapısı ve stili dinamik olarak değiştirilebilir.
  • Platform ve dilden bağımsızdır: DOM, farklı web tarayıcılarında ve programlama dillerinde tutarlı bir şekilde çalışır.

DOM'un Temel Kavramları:

  • Düğüm (Node): DOM ağacındaki her bir öğe, nitelik veya metin içeriği bir düğümdür. Farklı düğüm türleri bulunur (örneğin, Element Node, Text Node, Attribute Node).
  • Element: Bir HTML veya XML etiketini temsil eden düğüm türüdür (örneğin, <p>, <div>, <h1>).
  • Nitelik (Attribute): Bir HTML veya XML elementinin özelliklerini belirleyen anahtar-değer çiftleridir (örneğin, <img src="resim.jpg" alt="açıklama"> etiketindeki src ve alt nitelikleri).
  • Ağaç Yapısı: Belgenin hiyerarşik yapısını temsil eden ve düğümler arasındaki ilişkileri (ebeveyn, çocuk, kardeş) gösteren yapıdır.

DOM ile Yapılabilecekler:

  • Belgenin içeriğini okuma ve değiştirme
  • Belgeye yeni öğeler ekleme ve çıkarma
  • Öğelerin stilini değiştirme
  • Kullanıcı etkileşimlerine (örneğin, tıklama, fare hareketi) tepki verme

Örnek:

JavaScript kullanarak bir <p> elementinin içeriğini değiştirmek:

const paragraf = document.getElementById("myParagraph"); // "myParagraph" ID'sine sahip <p> elementini bul
paragraf.textContent = "Yeni metin!"; // Paragrafın içeriğini değiştir

Bu örnekte, document.getElementById() metodu ile DOM ağacında bir element bulunmakta ve textContent özelliği kullanılarak elementin metin içeriği değiştirilmektedir.

DOM, dinamik web sayfaları oluşturmak ve kullanıcı etkileşimlerine yanıt vermek için güçlü bir araçtır. JavaScript geliştiricileri için temel bir kavramdır.